<!DOCTYPE html>
<html lang="zh">
<!-- 
             佛祖保佑·佛祖保佑·佛祖保佑
           ——————————————————————————
                     _ooOoo_        
                    o8888888o       
                    88" . "88       
                    (| -_- |)       
                    O\ = /O         
                 ____/`---'\____    
                .'  \\| |//  `.    
               /  \\||| : |||//  \   
              /  _||||| -卍- |||||-  \  
              |   | \\\ - /// |   |   
              | \_|  ''\---/''  |_/ |   
              \  .-\__  `-`  ___/-.  /   
            ___`. .'  /--.--\  `. . __  
          ."" "<  `.___\_<|>_/___.  >" "".  
         | | :  `- \`.;`\ _ /`;.`/ - ` : | |  
         \  \  `-.  \_ __\ /__ _/  .-` /  /  
    ======`-.____`-.___\_____/___.-`____.-'======  
                      `=---='                       
    ——————————————————————————

-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园惊魂</title>
    <link rel="icon" type="image/svg+xml" href="logo.svg">
    <link rel="stylesheet" href="styles.css">
    <style>
        @font-face {
            font-family: 'mplus_hzk_12';
            src: url('fonts/mplus_hzk_12.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
</head>

<body>
    <!-- 开场动画 -->
    <div id="intro-animation" class="intro-animation">
        <img src="assets/img/Ui/Logo.png" alt="Logo" style="display: none;">
        <div id="language-selection" class="language-selection">
            <div class="language-title">选择语言 / Choose Language / 言語を選択</div>
            <div class="language-buttons">
                <button id="lang-zh" class="language-btn">中文</button>
                <button id="lang-en" class="language-btn">English</button>
                <button id="lang-ja" class="language-btn">日本語</button>
            </div>
        </div>
    </div>
    <div id="game-container" class="hidden">
        <!-- 开始界面 -->
        <div id="start-screen" class="screen">
            <h1 class="pixel-title" id="game-title">校园惊魂</h1>
            <div class="start-options">
                <div class="name-input">
                    <label for="player-name">你的名字:</label>
                    <input type="text" id="player-name" placeholder="输入你的名字...">
                </div>
                <div class="gender-selection">
                    <p>选择性别:</p>
                    <div class="gender-options">
                        <button id="male-option" class="gender-btn">男</button>
                        <button id="female-option" class="gender-btn">女</button>
                    </div>
                </div>

                <button id="start-game" class="start-btn" disabled>开始游戏</button>
                <button id="about-btn" class="about-btn">关于</button>
            </div>
            <div class="game-description">
                <p>在一个普通的晚自习后，你发现自己被困在了学校里...</p>
                <p>随着夜幕降临，校园里开始发生诡异的事情...</p>
            </div>
        </div>

        <!-- 章节选择界面 -->
        <div id="chapter-select-screen" class="screen hidden">
            <button id="back-to-main" class="back-btn">返回主界面</button>
            <h1 class="pixel-title">选择章节</h1>
            <div class="chapter-list">
                <div class="chapter-item available" data-chapter="prologue">
                    <h2>序章-「晚自习后」</h2>
                    <p>在一个普通的晚自习后，你发现自己被困在了学校里...</p>
                </div>
                <div class="chapter-item locked" data-chapter="chapter1">
                    <h2>第一章-「初见幽凄」<span class="lock-icon">🔒</span></h2>
                    <p>探索学校的神秘事件，解开隐藏的秘密。完成序章后解锁。</p>
                </div>
                <div class="chapter-item locked" data-chapter="chapter2">
                    <h2>第二章-「宿舍鬼影」<span class="lock-icon">🔒</span></h2>
                    <p>遇见第一位朋友，发现更多关于学校的秘密。完成第一章后解锁。</p>
                </div>
                <div class="chapter-item locked" data-chapter="chapter3">
                    <h2>第三章-「永夜沉沦」<span class="lock-icon">🔒</span></h2>
                    <p>揭开学校的最终秘密，直面真相。完成第二章后解锁。</p>
                </div>
                <div class="chapter-item locked" data-chapter="chapter4">
                    <h2>第四章-「轮回重启」<span class="lock-icon">🔒</span></h2>
                    <p>逃离学校后，诅咒依然追随着你。完成第三章后解锁。</p>
                </div>

                </div>

            </div>
        </div>

        <!-- 游戏界面 -->
        <div id="game-screen" class="screen hidden">
            <div id="game-header">
                <div id="player-info">
                    <span id="player-name-display"></span> | <span id="player-gender-display"></span>
                </div>
                <div id="game-time">时间: <span id="current-time">21:00</span></div>
            </div>
            <div id="game-container-inner">
                <div id="game-map"></div>
                <div id="game-inventory">
                    <div class="inventory-title">🎒 背包</div>
                    <div id="inventory-items"></div>
                </div>
            </div>
            <div id="game-actions"></div>
            <div id="game-dialogue">
                <div id="dialogue-text"></div>
                <div id="dialogue-choices"></div>
            </div>
        </div>

        <!-- 死亡界面 -->

        <!-- 关于弹窗 -->
        <div id="about-modal" class="modal hidden">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>🏆 关于本作品</h2>
                    <button id="close-about" class="close-btn">×</button>
                </div>
                <div class="modal-body">
                    <p>本作品参加本次2025国庆Vibe创作大赛</p>
                    <p>参赛者： 坦率的血翼蝠5801</p>
                    <p>版本号： Version <span id="version-number">重生版1.0.0.0</span></p>
                    <p>使用IDE： Trae CN</p>
                    <p>调用AI模型：</p>
                    <p>DeepSeekR1、Kimi-K2、</p>
                    <p>Qwen-3-Coder、Doubao-Seed-1.6</p>
                    <p>特别鸣谢： 神岛实验室</p>
                </div>
            </div>
        </div>
        <div id="death-screen" class="screen hidden">
            <h2 class="death-title">你遭遇了不幸...</h2>
            <div id="death-message"></div>
            <button id="restart-game" class="restart-btn">重新开始</button>
        </div>

        <!-- 结算界面 -->
        <div id="result-screen" class="screen hidden">
            <h1 class="pixel-title">恭喜通关!</h1>
            <div class="result-info">
                <p>章节: <span id="result-chapter"></span></p>
                <p>通关时间: <span id="result-time"></span></p>
            </div>
            <div class="result-actions">
                <button id="next-chapter-btn" class="start-btn">下一章</button>
                <button id="back-to-chapter-select" class="restart-btn">返回章节选择</button>
            </div>
        </div>
    </div>

    <!-- 引入i18n多语言支持 -->
    <script src="GameJs/i18n.js"></script>
    
    <script src="GameJs/Chapter1.js"></script>
    <script src="GameJs/Chapter2.js"></script>
    <script src="GameJs/Chapter3.js"></script>
    <script src="GameJs/Chapter4.js"></script>
    
    <script src="GameJs/Chapter0.js"></script>
    <script src="GameJs/CustomChapter.js"></script>

    <!-- 游戏版本号定义 -->
    <script>
        // 游戏版本号变量，方便统一修改
        const GAME_VERSION = "R2-1.0.1.1";
    </script>

    <!-- 音效元素 -->
    <audio id="intro-audio" src="assets/audio/Ahahahaha.mp3" preload="auto"></audio>
    <audio id="horror-ding" src="assets/audio/Ding-Horror.mp3" preload="auto"></audio>
    <audio id="horror-up" src="assets/audio/HorrorUp.mp3" preload="auto"></audio>
    <audio id="ghost-ha" src="assets/audio/GhostHa.mp3" preload="auto"></audio>
    <audio id="background-music" src="assets/audio/GhostSing(Sample).mp3" preload="auto" loop></audio>
    <audio id="long-scream" src="assets/audio/LongScream.mp3" preload="auto"></audio>

    <!-- 音效提示弹窗 -->
    <div id="audio-notice-modal" class="modal-overlay hidden">
        <div class="modal-content">
            <h3 id="audio-notice-version">⚠️ Version R2-1.0.1.1</h3>
            <p>从 1.1.5.1 开始，我们加入了音效支持。</p> <!--注：这个1.1.5.1并非实时更新的版本号，修改版本号时这一行不能变-->
            <p>本版本包含大量恐怖元素，可能含有部分使人感到不适的图像、音频、文本，</p>
            <p>如果感到生理不适，请立刻退出该游戏，否则@坦率的血翼蝠5801概不负责</p>
            <p>如果游戏中发现部分按钮点击无效，说明该按钮你尚未解锁，如果两个都点击无效，请尝试Ctrl+R或F5刷新网页(会保存你已解锁的关卡！)</p>
            <button id="audio-notice-confirm" class="modal-btn">我知道了</button>
        </div>
    </div>

    <style>
        /* 弹窗样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .modal-content {
            background-color: #2a2a2a;
            border: 2px solid #555;
            border-radius: 8px;
            padding: 2rem;
            max-width: 400px;
            text-align: center;
        }

        .modal-btn {
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background-color: #ff4d4d;
            border: none;
            color: #fff;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .modal-btn:hover {
            background-color: #ff1a1a;
        }

        /* 开场动画样式 */
        .intro-animation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.95);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 2000;
            opacity: 0;
            animation: fadeIn 1.5s forwards;
        }

        .intro-animation img {
            max-width: 80%;
            max-height: 80%;
            opacity: 0;
        }

        .language-selection {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            width: 100%;
            max-width: 500px;
        }
        
        .language-title {
            color: white;
            font-size: 20px;
            text-align: center;
            font-family: 'mplus_hzk_12', sans-serif;
            text-shadow: 0 0 10px #ff4d4d;
            margin-bottom: 30px;
            animation: pulse 1.5s infinite;
            position: relative;
            left: 0;
            right: 0;
            margin: 0 auto 30px;
            max-width: 100%;
            display: block;
        }
        
        .language-buttons {
            display: flex;
            flex-direction: column;
            gap: 15px;
            align-items: center;
            justify-content: center;
            width: 100%;
        }
        
        .language-btn {
            padding: 15px 40px;
            background-color: rgba(0, 0, 0, 0.7);
            border: 2px solid #ff4d4d;
            color: white;
            font-size: 18px;
            font-family: 'mplus_hzk_12', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            min-width: 200px;
            border-radius: 4px;
        }
        
        .language-btn:hover {
            background-color: #ff4d4d;
            transform: scale(1.05);
            box-shadow: 0 0 15px rgba(255, 77, 77, 0.7);
        }

        @keyframes pulse {
            0% {
                opacity: 1;
                transform: scale(1);
            }

            50% {
                opacity: 0.7;
                transform: scale(1.05);
            }

            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes stay {
            from {
                opacity: 1;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes fadeOut {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
                visibility: hidden;
            }
        }

        @keyframes fadeInImg {
            from {
                opacity: 0;
                transform: scale(0.8);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            animation: fadeIn 0.3s ease;
        }

        .modal-content {
            background-color: #2a2a2a;
            border: 2px solid #555;
            border-radius: 8px;
            padding: 2rem;
            max-width: 400px;
            text-align: center;
            box-shadow: 0 0 20px rgba(255, 77, 77, 0.3);
        }

        .modal-content h3 {
            color: #ff4d4d;
            margin-bottom: 1rem;
            font-size: 1.5rem;
        }

        .modal-content p {
            color: #ccc;
            margin-bottom: 0.8rem;
            line-height: 1.5;
        }

        .modal-btn {
            margin-top: 1.5rem;
            padding: 0.8rem 2rem;
            background-color: #333;
            border: 2px solid #555;
            color: #fff;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            border-radius: 4px;
        }

        .modal-btn:hover {
            background-color: #555;
            border-color: #ff4d4d;
            transform: scale(1.05);
        }



        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .hidden {
            display: none !important;
        }
    </style>

    <script>
        // 开场动画逻辑
        document.addEventListener('DOMContentLoaded', function () {
            const introAnimation = document.getElementById('intro-animation');
            const gameContainer = document.getElementById('game-container');
            const audioModal = document.getElementById('audio-notice-modal');
            const introAudio = document.getElementById('intro-audio');
            const logoImg = introAnimation.querySelector('img');
            const languageSelection = document.getElementById('language-selection');
            const langZhBtn = document.getElementById('lang-zh');
            const langEnBtn = document.getElementById('lang-en');
            const langJaBtn = document.getElementById('lang-ja');
            let gameStarted = false;

            // 存储用户选择的语言
            let selectedLanguage = 'zh'; // 默认中文

            // 语言选择处理函数
            function selectLanguage(lang) {
                if (gameStarted) return;
                gameStarted = true;
                
                // 存储用户选择的语言
                selectedLanguage = lang;
                localStorage.setItem('gameLanguage', lang);
                
                // 使用i18n系统设置语言
                if (window.i18n) {
                    window.i18n.setLanguage(lang);
                }
                
                // 隐藏语言选择界面
                languageSelection.style.display = 'none';

                // 显示并动画logo
                logoImg.style.display = 'block';
                setTimeout(() => {
                    logoImg.style.animation = 'fadeInImg 1.5s forwards 0.5s';
                }, 100);

                // 更新版本号显示
                setTimeout(function() {
                    // 获取版本号元素
                    const gameTitle = document.getElementById('game-title');
                    const versionNumber = document.getElementById('version-number');
                    const audioNoticeVersion = document.getElementById('audio-notice-version');

                    // 更新版本号（使用i18n翻译）
                    if (gameTitle && window.i18n) {
                        gameTitle.textContent = `${window.i18n.t('ui.gameTitle')}(Version ${GAME_VERSION})`;
                    } else if (gameTitle) {
                        gameTitle.textContent = `校园惊魂(Version ${GAME_VERSION})`;
                    }
                    if (versionNumber) {
                        versionNumber.textContent = GAME_VERSION;
                    }
                    if (audioNoticeVersion && window.i18n) {
                        audioNoticeVersion.textContent = `${window.i18n.t('audioNotice.title')} ${GAME_VERSION}`;
                    } else if (audioNoticeVersion) {
                        audioNoticeVersion.textContent = `⚠️ Version ${GAME_VERSION}`;
                    }
                }, 500);

                // 播放开场音频
                introAudio.play().catch(function (error) {
                    console.log('播放音频失败:', error);
                });

                // 动画总时长: 1.5s(fadeIn) + 2s(stay) = 3.5s
                setTimeout(function () {
                    // 停止音频播放
                    introAudio.pause();
                    introAudio.currentTime = 0;
                    // 使用渐隐动画隐藏logo
                    introAnimation.style.animation = 'fadeOut 1.5s forwards';

                    // 移除延迟，在logo开始消失时同时显示主容器和弹窗
                    gameContainer.classList.remove('hidden');
                    audioModal.classList.remove('hidden');
                     
                    // 应用语言设置
                    applyLanguageSettings(selectedLanguage);
                }, 3500);
            }

            // 应用语言设置的函数
            function applyLanguageSettings(lang) {
                console.log('应用语言设置:', lang);
                // 使用i18n系统更新页面文本
                if (window.i18n) {
                    window.i18n.updatePageTexts();
                }
            }

            // 为语言按钮添加点击事件
            langZhBtn.addEventListener('click', () => selectLanguage('zh'));
            langEnBtn.addEventListener('click', () => selectLanguage('en'));
            langJaBtn.addEventListener('click', () => selectLanguage('ja'));
            
            // 尝试从localStorage获取上次选择的语言
            const savedLanguage = localStorage.getItem('gameLanguage');
            if (savedLanguage) {
                selectedLanguage = savedLanguage;
            }
        });
        // 弹窗逻辑
        document.addEventListener('DOMContentLoaded', function () {
            const audioModal = document.getElementById('audio-notice-modal');
            const audioConfirmBtn = document.getElementById('audio-notice-confirm');

            // 音效提示弹窗逻辑
            audioConfirmBtn.addEventListener('click', function () {
                audioModal.classList.add('hidden');
            });

            // 点击弹窗外部关闭
            audioModal.addEventListener('click', function (e) {
                if (e.target === audioModal) {
                    audioModal.classList.add('hidden');
                }
            });

            // 获取背景音乐元素
            const backgroundMusic = document.getElementById('background-music');

            // 开始游戏按钮逻辑
            const startGameBtn = document.getElementById('start-game');
            const ghostHaAudio = document.getElementById('ghost-ha');

            startGameBtn.addEventListener('click', function () {
                // 播放ghost-ha音频
                ghostHaAudio.play().catch(function (error) {
                    console.error('播放音频失败:', error);
                });
            });

            // 监听游戏界面显示/隐藏事件来控制背景音乐
            const gameScreen = document.getElementById('game-screen');
            const startScreen = document.getElementById('start-screen');
            const chapterSelectScreen = document.getElementById('chapter-select-screen');
            const deathScreen = document.getElementById('death-screen');
            const resultScreen = document.getElementById('result-screen');

            // 检查当前哪个界面显示
            function checkScreenVisibility() {
                if (!gameScreen.classList.contains('hidden')) {
                    // 游戏界面显示，播放背景音乐
                    backgroundMusic.play().catch(function (error) {
                        console.error('播放背景音乐失败:', error);
                    });
                } else {
                    // 非游戏界面显示，暂停背景音乐
                    backgroundMusic.pause();
                }
            }

            // 初始检查
            checkScreenVisibility();

            // 为所有可能切换界面的按钮添加事件监听器
            document.querySelectorAll('button').forEach(button => {
                button.addEventListener('click', function () {
                    // 延迟检查，确保界面已经切换
                    setTimeout(checkScreenVisibility, 100);
                });
            });

            // 监听死亡屏幕显示事件
            const observer = new MutationObserver(function (mutations) {
                mutations.forEach(function (mutation) {
                    if (mutation.attributeName === 'class') {
                        checkScreenVisibility();
                    }
                });
            });

            // 监听所有屏幕的class变化
            [gameScreen, startScreen, chapterSelectScreen, deathScreen, resultScreen].forEach(screen => {
                observer.observe(screen, { attributes: true });
            });
        });

        // 关于按钮和弹窗逻辑
        function setupAboutModal() {
            const aboutBtn = document.getElementById('about-btn');
            const aboutModal = document.getElementById('about-modal');
            const closeAboutBtn = document.getElementById('close-about');

            if (!aboutBtn || !aboutModal || !closeAboutBtn) {
                console.error('无法找到关于按钮或弹窗元素');
                return;
            }

            // 打开关于弹窗
            aboutBtn.addEventListener('click', function () {
                console.log('关于按钮被点击');
                aboutModal.classList.remove('hidden');
                aboutModal.style.display = 'flex';
            });

            // 关闭关于弹窗
            closeAboutBtn.addEventListener('click', function () {
                aboutModal.style.display = 'none';
                aboutModal.classList.add('hidden');
            });

            // 点击弹窗外部关闭弹窗
            aboutModal.addEventListener('click', function (event) {
                if (event.target === aboutModal) {
                    aboutModal.style.display = 'none';
                    aboutModal.classList.add('hidden');
                }
            });
        }

        // 确保DOM完全加载后再设置弹窗
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', setupAboutModal);
        } else {
            setupAboutModal();
        }
    </script>
</body>

</html>